<template>
  <div id="integralDeclare">
    <van-nav-bar
      title="积分申报"
      right-text="记录"
      left-arrow
      @click-right="onClickRight"
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="integralDeclare-body">
      <van-tabs @click="changeTab">
        <van-tab title="本人申报">
          <van-cell :value="buildingNoValue" is-link @click="show = true">
            <template slot="title">
              <span class="require">*</span>
              <span>选择楼号</span>
            </template>
          </van-cell>
          <van-cell :value="identityValue" is-link @click="click_identity">
            <template slot="title">
              <span class="require">*</span>
              <span>选择身份</span>
            </template>
          </van-cell>
          <van-cell :value="identityTypeValue" is-link @click="click_type">
            <template slot="title">
              <span class="require">*</span>
              <span>选择类型</span>
            </template>
          </van-cell>

          <van-field
            v-model="message"
            required
            rows="5"
            autosize
            label="内容描述"
            type="textarea"
            placeholder="请详细描述申报信息"
          />
          <div class="integralDeclare-uploader">
            <span class="require_">*</span>
            <van-uploader
              v-model="imageList"
              :after-read="afterRead"
              :before-read="beforeRead"
              @delete="deleteImg"
              :max-count="1"
            />
          </div>

          <div class="mine-out">
            <van-button type="default" :disabled="!disabled" @click="save">确认申报</van-button>
          </div>
        </van-tab>
        <van-tab title="他人申报">
          <van-cell :value="otherBuildingNoValue_" is-link @click="otherShow_ = true">
            <template slot="title">
              <span class="require">*</span>
              <span>申请人楼号</span>
            </template>
          </van-cell>
          <van-cell title="当事人楼号" :value="otherbuildingNoValue" is-link @click="otherShow = true" />
          <van-cell
            title="当事人身份选择"
            :value="otheridentityValue"
            is-link
            @click="clickOtherIdentity"
          />
          <van-cell title="当事人姓名" :value="otherNameValue" is-link @click="clickOtherName" />
          <van-cell :value="otheridentityTypeValue" is-link @click="other_click_identityTypeValue">
            <template slot="title">
              <span>选择类型</span>
            </template>
          </van-cell>
          <van-field
            v-model="otherMessage"
            rows="5"
            autosize
            required
            label="内容描述"
            type="textarea"
            placeholder="请详细描述申报信息"
          />
          <div class="integralDeclare-uploader">
            <span class="require_">*</span>
            <van-uploader
              v-model="fileList"
              :after-read="otherAfterRead"
              :before-read="otherBeforeRead"
              :max-count="1"
              @delete="deleteOtherImg"
            />
          </div>
          <div class="mine-out">
            <van-button type="default" :disabled="!disableds" @click="otherSave">确认申报</van-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
    <!-- 本人选楼号 -->
    <van-action-sheet
      v-model="show"
      :actions="buildingCodes"
      @select="onSelect"
      @cancel="buildingNoValue = ''"
      cancel-text="取消"
    />
    <!-- 本人选身份 -->
    <van-action-sheet
      v-model="show1"
      :actions="identity"
      @select="onSelect1"
      @cancel="identityValue = ''"
      cancel-text="取消"
    />
    <!-- 本人选身份类型 -->
    <van-action-sheet
      v-model="show2"
      :actions="identityType"
      @select="onSelect2"
      @cancel="identityTypeValue = ''"
      cancel-text="取消"
    />
    <!-- 他人当事人楼号 -->
    <van-action-sheet
      v-model="otherShow"
      :actions="otherbuildingNo"
      @select="otherOnSelect"
      @cancel="otherbuildingNoValue = ''"
      cancel-text="取消"
    />
    <!-- 他人申请人楼号 -->
    <van-action-sheet
      v-model="otherShow_"
      :actions="otherbuildingCodes"
      @select="otherOnSelect_"
      @cancel="otherBuildingNoValue_ = ''"
      cancel-text="取消"
    />
    <!-- 他人选身份 -->
    <van-action-sheet
      v-model="otherShow1"
      :actions="otheridentity"
      @select="otherOnSelect1"
      @cancel="otheridentityValue = ''"
      cancel-text="取消"
    />
    <!-- 他人当事人姓名 -->
    <!-- <van-action-sheet v-model="otherShowName" :actions="otherName" @select="otherOnSelectName" /> -->
    <van-action-sheet
      v-if="otherShowName"
      v-model="otherShowName"
      title="当事人姓名"
      @cancel="otherNameValue = ''"
      cancel-text="取消"
    >
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell
            v-for="(item,index) in otherName"
            :value="item.idcardNo"
            :key="index"
            :title="item.username"
            @click="otherOnSelectName(item)"
          />
        </van-list>
      </van-pull-refresh>
    </van-action-sheet>
    <!-- 他人选择身份类型 -->
    <van-action-sheet
      v-model="otherShow2"
      :actions="otheridentityType"
      @select="otherOnSelect2"
      @cancel="otheridentityTypeValue =''"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import { notEmpty } from "../workstation/emptyTest";
import integral from "../../controller/integral";
import uploadService from "../../controller/mine.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      otherbuildingCodesId_: "",
      otherShow_: false,
      otherBuildingNoValue_: "",
      showLoad: true,
      curPage: 1,
      pageSize: 10,
      isLoading: false,
      loading: false,
      finished: false,
      nameId: "",
      otherNameValue: "",
      identityTypeId: "",
      otheridentityTypeId: "",
      otheridentityId: "", // 他人当事人身份id
      otherbuildingCodesId: "", // 他人楼栋id
      neighborhoodId: "",
      buildingCodesId: "", // 楼栋id
      identityId: "", // 选择身份id
      userId: "",
      showLoading: false,
      buildingNoValue: "",
      identityValue: "",
      identityTypeValue: "",
      otherbuildingNoValue: "",
      otheridentityValue: "",
      otherName: [],
      otheridentityTypeValue: "",
      message: "",
      otherMessage: "",
      show: false,
      show1: false,
      show2: false,
      otherShow: false,
      otherShow1: false,
      otherShow2: false,
      otherShowName: false,
      imageList: [], // 本人申报图片必传
      fileList: [], // 他人申报图片
      buildingCodes: [], //楼栋号
      identity: [], //身份
      identityType: [], // 类型
      otherbuildingCodes: [], //他人申请人楼号
      otherbuildingNo: [], // 他人当事人楼栋号
      otheridentity: [], // 他人当事人身份选择
      otheridentityType: [], //他人选择类型
      noContent: [{ name: "", subname: "" }] //当事人姓名为空
    };
  },
  computed: {
    disabled: function() {
      return (
        notEmpty(this.buildingNoValue) &&
        notEmpty(this.identityValue) &&
        notEmpty(this.identityTypeValue) &&
        notEmpty(this.message) &&
        this.imageList.length > 0
      );
    },
    disableds: function() {
      return (
        notEmpty(this.otherBuildingNoValue_) &&
        notEmpty(this.otherMessage) &&
        this.fileList.length > 0
      );
    }
  },
  // // keep-alive  离开页面表单不缓存数据
  // activated() {
  //   // 本人
  //   (this.buildingNoValue = ""),
  //     (this.identityValue = ""),
  //     (this.identityTypeValue = ""),
  //     (this.message = ""),
  //     (this.imageList = []);
  //   // 他人
  //   (this.otherbuildingNoValue = ""),
  //     (this.otheridentityValue = ""),
  //     (this.otherNameValue = ""),
  //     (this.otheridentityTypeValue = ""),
  //     (this.otherMessage = ""),
  //     (this.fileList = []);
  // },
  mounted() {
    this.neighborhoodId = JSON.parse(localStorage.getItem("userInfo")).shequId;
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
    this.getBulidingCode();
    this.integral_identity();
    this.integral_building_neighborhoods();
    this.integral_identity_choose();
  },
  methods: {
    changeTab(title) {
      this.identityType = [];
      this.otheridentityType = [];
      if (title === 0 && this.identityId !== "") {
        this.integral_mapNameAndId(this.identityId);
      }
      if (title === 1 && this.otheridentityId !== "") {
        this.integral_mapNameAndId(this.otheridentityId);
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.curPage += 1;
        this.isLoading = false;
        this.getOtherOnSelectName();
      }, 500);
    },
    onLoad() {
      this.isLoading = false;
      this.onRefresh();
    },
    // 他人姓名选择
    getOtherOnSelectName() {
      let data = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        buildCode: this.otherbuildingCodesId,
        identityId: this.otheridentityId
      };
      integral.integral_builderUsers(data).then(res => {
        if (res.code === "0") {
          this.loading = true;
          this.finished = false;
          if (
            (res.datas && res.datas.records.length === 0) ||
            res.datas === null
          ) {
            this.loading = false;
            this.isLoading = false;
            this.finished = true;
            return;
          }
          this.$nextTick(() => {
            this.loading = false;
            this.isLoading = false;
          });
          if (res.datas.records.length < this.pageSize) {
            this.finished = true;
          }
          if (
            (res.datas && res.datas.records.length !== 0) ||
            res.datas !== null
          ) {
            let otherNameList = res.datas.records;
            otherNameList.forEach(item => {
              item.name = item.username;
              item.subname = item.idcardNo;
            });
            this.otherName = [...this.otherName, ...res.datas.records];
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    clickOtherName() {
      this.otherShowName = false;
      if (this.otherName.length === 0) {
        this.$toast("暂无姓名");
      } else {
        this.curPage = 1;
        this.otherName = [];
        this.otherShowName = true;
        this.getOtherOnSelectName();
      }
      if (this.otheridentityValue === "") {
        this.$toast("请选择身份");
      }
      // if (this.otherbuildingNoValue === "" || this.otheridentityValue === "") {
      //   this.otherName = this.noContent;
      // } else {
      //   this.getOtherOnSelectName();
      // }
    },
    otherOnSelectName(item) {
      this.nameId = item.id;
      this.otherNameValue = item.name;
      this.otherShowName = false;
    },
    // 他人申报楼栋号
    integral_building_neighborhoods() {
      let id = this.neighborhoodId;
      integral.integral_building_neighborhoods(id).then(res => {
        if (res.code == "0") {
          if (res.datas.length !== 0) {
            let otherBuildingList = res.datas;
            otherBuildingList.forEach(item => {
              item.name = item.buildingCode;
            });
            this.otherbuildingNo = otherBuildingList;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    //  本人身份选择
    click_identity() {
      this.show1 = false;
      this.identityTypeValue = "";
      if (this.identity.length === 0) {
        this.$toast("暂无数据");
      } else {
        this.integral_identity();
        this.show1 = true;
      }
    },
    // 他人身份选择
    clickOtherIdentity() {
      this.otherShow1 = true;
      this.otheridentityTypeValue = "";
      this.otherNameValue = "";
      this.otherName = [];
      // if (this.otherbuildingNoValue === "") {
      //   this.$toast("请选择楼号");
      //   return;
      // } else {
      //   this.otherShow1 = true;
      // }
    },
    // 他人当事人身份选择
    integral_identity_choose() {
      integral.integral_identity_choose().then(res => {
        if (res.code == "0") {
          if (res.datas.length !== 0) {
            this.otheridentity = res.datas;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    // 本人申报类型选择
    click_type() {
      this.show2 = false;
      if (this.identityValue === "") {
        this.$toast("请选择身份");
        return;
      } else {
        this.show2 = true;
      }
      if (this.identityType.length === 0) {
        this.show2 = false;
        this.$toast("暂无数据");
      } else {
        this.show2 = true;
      }
    },
    // 本人选择类型
    integral_mapNameAndId(data) {
      this.identityType = [];
      this.otheridentityType = [];
      let id = {
        applyIdentityId: data
      };
      integral.integral_mapNameAndId(id).then(res => {
        if (res.code == "0") {
          if (res.datas.length !== 0) {
            let list = res.datas[0];
            for (let key in list) {
              this.identityType.push({ name: list[key], id: key });
              this.otheridentityType.push({ name: list[key], id: key });
            }
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    // 选择身份
    integral_identity() {
      let userId = this.userId;
      let shequId = JSON.parse(localStorage.getItem("userInfo")).shequId;
      integral.integral_identity(userId, shequId).then(res => {
        if (res.code == "0") {
          if (res.datas.length !== 0) {
            let identityList = res.datas;
            identityList.forEach(item => {
              item.name = item.identityName;
            });
            this.identity = identityList;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    // 本人楼栋号
    getBulidingCode() {
      let id = this.userId;
      integral.integral_bind_build(id).then(res => {
        if (res.code == "0") {
          if (res.datas.length !== 0) {
            let buildingList = res.datas;
            buildingList.forEach(item => {
              item.name = item.buildingCode;
            });
            this.buildingCodes = buildingList;
            this.otherbuildingCodes = buildingList;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    onClickRight() {
      this.$router.push({ name: "declareRecord" });
    },
    //  他人申请人楼号  和本人申报楼号一个接口
    otherOnSelect_(item) {
      this.otherBuildingNoValue_ = item.name;
      this.otherbuildingCodesId_ = item.buildingCode;
      this.otherNameValue = "";
      this.otherShow_ = false;
    },
    // 本人申报楼号
    onSelect(item) {
      this.buildingNoValue = item.name;
      this.buildingCodesId = item.buildingCode;
      this.identityValue = "";
      this.show = false;
    },
    // 本人申报身份
    onSelect1(item) {
      this.identityValue = item.name;
      this.identityId = item.identityId;
      this.identityType = [];
      this.integral_mapNameAndId(item.identityId);
      this.show1 = false;
    },
    // 本人申报类型
    onSelect2(item) {
      this.identityTypeValue = item.name;
      this.identityTypeId = item.id;
      this.show2 = false;
    },
    // 他人申报楼号
    otherOnSelect(item) {
      this.otherbuildingNoValue = item.name;
      this.otherbuildingCodesId = item.buildingCode;
      this.otherShow = false;
      if (this.otheridentityId !== "") {
        this.curPage = 1;
        this.otherNameValue = "";
        this.getOtherOnSelectName();
      }
    },
    // 他人申报当事人身份选择
    otherOnSelect1(item) {
      this.otheridentityValue = item.name;
      this.otheridentityId = item.id;
      this.otherShow1 = false;
      this.otheridentityType = [];
      this.integral_mapNameAndId(item.id);
      if (this.otherbuildingCodesId !== "") {
        this.curPage = 1;
        this.getOtherOnSelectName();
      }
    },
    // 点击他人申报类型
    other_click_identityTypeValue() {
      this.otherShow2 = false;
      if (this.otheridentityValue === "") {
        this.$toast("请选择身份");
        return;
      } else {
        this.otherShow2 = true;
      }
      if (this.otheridentityType.length === 0) {
        this.otherShow2 = false;
        this.$toast("暂无数据");
      } else {
        this.otherShow2 = true;
      }
    },
    // 他人申报类型
    otherOnSelect2(item) {
      // console.log(item, "applyTypeId");
      this.otheridentityTypeValue = item.name;
      this.otheridentityTypeId = item.id;
      this.otherShow2 = false;
    },
    beforeRead(file) {
      const acceptImgs = ["image/jpeg", "image/png", "image/jpg"];
      if (!acceptImgs.includes(file.type)) {
        this.$toast("请上传JPG或者PNG格式的图片!");
        return false;
      }
      this.showLoading = true;
      return true;
    },
    afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      uploadService
        .upload_image(formData)
        .then(res => {
          if (res.data.code === "0") {
            this.$toast("图片上传成功！");
            this.imageList = [{ url: res.data.datas }];
          } else {
            if (res && res.data && res.data.msg) {
              this.$toast(res.data.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
          return true;
        });
    },
    deleteImg(file) {
      this.imageList.splice(
        this.imageList.findIndex(item => item.file.name === file.file.name),
        1
      );
    },
    // 他人
    otherAfterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      uploadService
        .upload_image(formData)
        .then(res => {
          if (res.data.code === "0") {
            this.$toast("图片上传成功！");
            this.fileList = [{ url: res.data.datas }];
          } else {
            if (res && res.data && res.data.msg) {
              this.$toast(res.data.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
          return true;
        });
    },
    otherBeforeRead(file) {
      const acceptImgs = ["image/jpeg", "image/png", "image/jpg"];
      if (!acceptImgs.includes(file.type)) {
        this.$toast("请上传JPG或者PNG格式的图片!");
        return false;
      }
      this.showLoading = true;
      return true;
    },
    deleteOtherImg(file) {
      this.fileList.splice(
        this.fileList.findIndex(item => item.file.name === file.file.name),
        1
      );
    },
    // 本人申报申请
    save() {
      let data = {
        applyMode: 1, // 本人申报是1，他人申报是2
        neighborhoodId: this.neighborhoodId,
        buildingCode: this.buildingCodesId,
        createByBuildingCode: this.buildingCodesId,
        content: this.message,
        identityId: this.identityId,
        applyTypeId: Number(this.identityTypeId), // 申报类型
        image: this.imageList[0].url
      };
      integral.integral_create(data).then(res => {
        if (res.code == "0") {
          this.$toast("申报成功");
          (this.buildingNoValue = ""),
            (this.identityValue = ""),
            (this.identityTypeValue = ""),
            (this.message = ""),
            (this.imageList = []);
          this.$router.go(-1);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    // 他人申报申请
    otherSave() {
      let data = {
        applyMode: 2, // 他人申报是2
        neighborhoodId: this.neighborhoodId,
        buildingCode: this.otherbuildingCodesId,
        createByBuildingCode: this.otherbuildingCodesId_,
        applyName: this.otherNameValue,
        applyUserId: this.nameId,
        content: this.otherMessage,
        applyIdentityId: this.otheridentityId, //身份id
        identityId: null, //他人申报时为null 当事人身份id
        applyTypeId: Number(this.otheridentityTypeId)
          ? Number(this.otheridentityTypeId)
          : null, // 申报类型
        image: this.fileList[0].url
      };
      integral.integral_create(data).then(res => {
        if (res.code == "0") {
          this.$toast("申报成功");
          (this.otherbuildingNoValue = ""),
            (this.otheridentityValue = ""),
            (this.otherNameValue = ""),
            (this.otheridentityTypeValue = ""),
            (this.otherMessage = ""),
            (this.fileList = []);
          this.$router.go(-1);
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#integralDeclare {
  height: 100%;
  background: #fff;
  .integralDeclare-uploader {
    padding: 20px;
    position: relative;
    .require_ {
      position: absolute;
      top: 20px;
      left: 10px;
      color: #dc4630;
    }
  }
  /* .van-tab__pane {
    padding: 20px 10px;
  } */
  .require {
    color: #dc4630;
    margin: 0 3px 0 -8px;
  }
  .mine-out {
    margin-top: 20%;
    button {
      width: 80%;
      height: 80%;
      margin: auto;
      display: block;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #fff;
      letter-spacing: 0;
      text-align: center;
      background: #dc4630;
      border-radius: 44px;
      border-radius: 44px;
    }
  }
  /deep/ .van-loading {
    text-align: center;
  }
  /deep/ .van-action-sheet__cancel,
  .van-action-sheet__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
